<template>
  <div id="goodslist">
    <NavBar class="home-nav">
      <div slot="center">购物街</div>
    </NavBar>
    <SearchInput />
    <Scroll class="content">
      <div class="first_tab">
        <router-link class="goods_item" v-for="item in goodsList" :key="item.goods_id" 
        :to="`/goods_detail?goods_id=${item.goods_id}`">
          <!-- 左侧 图片容器 url="/pages/goods_detail/index?goods_id={{item.goods_id}}"-->
          <div class="goods_img_wrap">
            <img v-if="item.goods_small_logo" :src="item.goods_small_logo" />
            <img v-else src="~assets/wu.jpg" alt="" />
          </div>
          <!-- 右侧 商品容器 -->
          <div class="goods_info_wrap">
            <div class="goods_name">{{ item.goods_name }}</div>
            <div class="goods_price">￥{{ item.goods_price }}</div>
          </div>
        </router-link>
      </div>
    </Scroll>
  </div>
</template>

<script>
import requests from "@/api/ajax";
// import { getGoodsList } from "@/api/index";
export default {
  name: "GoodsList",

  data() {
    return {
      QueryParams: {
        query: "",
        cid: "",
        pagenum: 1,
        pagesize: 10,
        // 每页请求十条数据
      },
      // 总页数
      totalPages: 1,
      goodsList: [],
    };
  },
  beforeMount() {
    this.QueryParams.cid = this.$route.query.cid || "";
  },
  mounted() {
    this.getGoodsList();
  },

  methods: {
    async getGoodsList() {
      const res = await requests({
        url: "/goods/search",
        params: this.QueryParams,
      });
      console.log(res);
      this.goodsList = [...this.goodsList, ...res.message.goods];
    },
  }, // getGoodsList(this.QueryParams).then((res) => {
  //   console.log(res);
  //   const total = res.message.total;
  //   // 总页数 = Math.ceil(总条数 /  页容量  pagesize)
  //   //     总页数     = Math.ceil( 23 / 10 ) = 3
  //   this.totalPages = Math.ceil(total / this.QueryParams.pagesize);
  //   console.log(this.totalPages);
  //   this.goodsList = [...this.goodsList, ...res.message.goods];
  // });
};
</script>

<style lang="less" scoped>
#goodslist {
  /*padding-top: 44px;//100%视口*/
  height: 100vh;
  position: relative;
}

.content {
  position: absolute;
  top: 88px;
  bottom: 49px;
  left: 0;
  right: 0;
  overflow: hidden;
}
/* pages/goods_list/index.wxss */
.first_tab {
  .goods_item {
    display: flex;
    border-bottom: 1px solid #ccc;
    .goods_img_wrap {
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 70%;
      }
    }
    .goods_info_wrap {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods_name {
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .goods_price {
        color: var(--color-high-text);
        font-size: 32rpx;
      }
    }
  }
}
</style>
